<template>
	<ul class="todo-list">
		<!-- completed: 完成的类名 -->
		<li :class="{completed: item.isDone}" v-for="item in showList" :key="item.id">
			<div class="view">
				<input class="toggle" type="checkbox" :checked="item.isDone" @change="changeFn(item.id)" />
				<label> {{ item.name }} </label>
				<button class="destroy"
				@click="delFn(item.id)"
				></button>
			</div>
		</li>
	</ul>

</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {

		methods: {
			...mapMutations('todos', [
				'changeFn',
				'delFn'
			])
		},

		computed: {
			...mapState('todos', [
					'list',
					
			]),
			...mapGetters('todos', ['showList'])
		},

		watch:{
			list:{
				deep: true,
				handler(){
					localStorage.setItem("vuex-todos1", JSON.stringify(this.showList))
				}
			}
		}
	}
</script>
